﻿
@{
    ViewBag.Title = "HighchartView";
    Layout = "~/Views/Shared/_Index.cshtml";
}
@*<script src="https://cdn.bootcss.com/Chart.js/2.7.2/Chart.bundle.js"></script>*@
<script src="~/Content/chart/Chart.Bubble.js"></script>
<script src="~/Content/chart/utils.js"></script>
<div class="place">
    <span>位置：</span>
    <ul class="placeul">
        <li><a href="#">首页</a></li>
        <li><a href="#">图形展示</a></li>
    </ul>
</div>
<div class="formbody">
    <ul class="seachform">

        <li>
            <label>开始日期:</label><input name="" type="text" class="dfinput Wdate" id="StartDate" value="@DateTime.Now.AddDays(-7).ToString("yyyy-MM-dd")" style="height:34px" onFocus="WdatePicker()"  />
        </li>
        <li>
            <label>结束日期:</label><input name="" type="text" class="dfinput Wdate" id="EndDate" value="@DateTime.Now.ToString("yyyy-MM-dd")"  style="height:34px"  onFocus="WdatePicker()"/>
        </li>

        <li>
            <label>&nbsp;</label>
            <input name="" id="ok" type="button" class="scbtn" value="查询" />


        </li>
    </ul>


</div>
<div style="width:75%;">
    <canvas id="canvas"></canvas>
</div>
<script>
    var MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
    var config = {
        type: 'line',
        data: {
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
           
            datasets: [{
                label: 'My First dataset',
                backgroundColor: window.chartColors.red,
                borderColor: window.chartColors.red,
                data: [
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor()
                ],
                fill: false,
            }]
        },
        options: {
            responsive: true,
            title: {
                display: true,
                text: '图形统计'
            },
            tooltips: {
                mode: 'index',
                intersect: false,
            },
            hover: {
                mode: 'nearest',
                intersect: true
            },
            scales: {
                xAxes: [{
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: '出入记录'
                    }
                }],
                yAxes: [{
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: '人数'
                    }
                }]
            }
        }
    };

    $(function () {
        $('#ok').click(function () {
            $.post('@Url.Action("GetAccessRecordJson", "AccessRecord")', { StartDate: $("#StartDate").val(), EndDate: $("#EndDate").val() }, function (result) {
                config.data.labels = result.data.LabelList;
                config.data.datasets = result.data.datasets;
                if (window.myLine == undefined)
                {
                    var ctx = document.getElementById('canvas').getContext('2d');
                    window.myLine = new Chart(ctx, config);
                }
                else
                {
                    window.myLine.update();
                }
            })

        })
        $("#ok").click();
        @*$.post('@Url.Action("GetAccessRecordJson", "AccessRecord")', null, function (result) {
            config.data.labels = result.data.LabelList;
            config.data.datasets = result.data.datasets;
            var ctx = document.getElementById('canvas').getContext('2d');
            window.myLine = new Chart(ctx, config);
        })*@
      
    })
    var colorNames = Object.keys(window.chartColors);
	
		
</script>